
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>五子棋游戏</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            font-family: Arial, sans-serif;
        }
        #game-board {
            display: grid;
            grid-template-columns: repeat(15, 30px);
            grid-template-rows: repeat(15, 30px);
            gap: 1px;
            background-color: #DCB35C;
            padding: 10px;
            border: 2px solid #8B4513;
        }
        .cell {
            width: 30px;
            height: 30px;
            background-color: #DCB35C;
            border: 1px solid #8B4513;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .black {
            width: 24px;
            height: 24px;
            background-color: black;
            border-radius: 50%;
        }
        .white {
            width: 24px;
            height: 24px;
            background-color: white;
            border-radius: 50%;
        }
        #status {
            margin-top: 20px;
            font-size: 20px;
            font-weight: bold;
        }
        #restart {
            margin-top: 10px;
            padding: 8px 16px;
            font-size: 16px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>五子棋游戏</h1>
    <div id="game-board"></div>
    <div id="status">当前玩家: 黑棋</div>
    <button id="restart">重新开始</button>

    <script>
        const boardSize = 15;
        const board = Array(boardSize).fill().map(() => Array(boardSize).fill(0));
        let currentPlayer = 1; // 1: 黑棋, 2: 白棋
        let gameOver = false;

        const gameBoard = document.getElementById('game-board');
        const statusDisplay = document.getElementById('status');
        const restartButton = document.getElementById('restart');

        // 初始化棋盘
        function initBoard() {
            gameBoard.innerHTML = '';
            for (let i = 0; i < boardSize; i++) {
                for (let j = 0; j < boardSize; j++) {
                    const cell = document.createElement('div');
                    cell.className = 'cell';
                    cell.dataset.row = i;
                    cell.dataset.col = j;
                    cell.addEventListener('click', handleCellClick);
                    gameBoard.appendChild(cell);
                }
            }
        }

        // 处理点击事件
        function handleCellClick(e) {
            if (gameOver) return;

            const row = parseInt(e.target.dataset.row);
            const col = parseInt(e.target.dataset.col);

            if (board[row][col] !== 0) return;

            board[row][col] = currentPlayer;
            renderMove(row, col);

            if (checkWin(row, col)) {
                gameOver = true;
                statusDisplay.textContent = `游戏结束! ${currentPlayer === 1 ? '黑棋' : '白棋'}获胜!`;
                return;
            }

            currentPlayer = currentPlayer === 1 ? 2 : 1;
            statusDisplay.textContent = `当前玩家: ${currentPlayer === 1 ? '黑棋' : '白棋'}`;
        }

        // 渲染棋子
        function renderMove(row, col) {
            const cell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
            const piece = document.createElement('div');
            piece.className = currentPlayer === 1 ? 'black' : 'white';
            cell.appendChild(piece);
        }

        // 检查胜利条件
        function checkWin(row, col) {
            const directions = [
                [0, 1],  // 水平
                [1, 0],  // 垂直
                [1, 1],  // 对角线
                [1, -1]  // 反对角线
            ];

            for (const [dx, dy] of directions) {
                let count = 1;

                // 正向检查
                for (let i = 1; i < 5; i++) {
                    const newRow = row + i * dx;
                    const newCol = col + i * dy;
                    if (newRow < 0 || newRow >= boardSize || newCol < 0 || newCol >= boardSize || 
                        board[newRow][newCol] !== currentPlayer) {
                        break;
                    }
                    count++;
                }

                // 反向检查
                for (let i = 1; i < 5; i++) {
                    const newRow = row - i * dx;
                    const newCol = col - i * dy;
                    if (newRow < 0 || newRow >= boardSize || newCol < 0 || newCol >= boardSize || 
                        board[newRow][newCol] !== currentPlayer) {
                        break;
                    }
                    count++;
                }

                if (count >= 5) {
                    return true;
                }
            }

            return false;
        }

        // 重置游戏
        function resetGame() {
            for (let i = 0; i < boardSize; i++) {
                for (let j = 0; j < boardSize; j++) {
                    board[i][j] = 0;
                }
            }
            currentPlayer = 1;
            gameOver = false;
            statusDisplay.textContent = '当前玩家: 黑棋';
            initBoard();
        }

        restartButton.addEventListener('click', resetGame);

        // 初始化游戏
        initBoard();
    </script>
</body>
</html>
